<template>
    <div class="app-container">
      <div class="head" >
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="100px">
          <el-form-item label="" prop="fromCustomerPhone">
            <el-input v-model="queryParams.fromCustomerPhone" placeholder="转赠账号、地址" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="" prop="toCustomerPhone">
            <el-input v-model="queryParams.toCustomerPhone" placeholder="接收账号、地址" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="转赠类型：" prop="donationType">
            <el-select v-model="queryParams.donationType" placeholder="请选择">
              <el-option v-for="item in transferTypeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> 
          <el-form-item label="状态：" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择">
              <el-option v-for="item in transferStatusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> 
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" @click="formalities">转赠手续费配置</el-button>
        </div>
      </div>

      <div class="listBox">
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:fee="{ scope }">
          <p v-if="scope.row.feeType == 1">{{scope.row.fee}}CoCo</p>
          <p v-if="scope.row.feeType == 2">￥{{scope.row.fee}}</p>
          <p v-if="scope.row.feeType == 3">{{scope.row.fee}}椰分</p>
        </template>
        <template v-slot:donationType="{ scope }">
          <p v-if="scope.row.donationType == 1">CoCo</p>
          <p v-else-if="scope.row.donationType == 2">椰分</p>
          <p v-else>--</p>
        </template>
        <template v-slot:status="{ scope }">
          <div v-if="scope.row.status == 1">已完成</div>
          <div v-if="scope.row.status == 2">待支付</div>
          <div v-if="scope.row.status == 3">已取消</div>
        </template>
      </ex-table>
      </div>
        <add-dialog
            v-if="formalitiesVisible"
            :visible.sync="formalitiesVisible"
            @success="_handleSuccess" 
        /> 
    </div>
  </template>
 <script>
 import {
   integralRecordList,
 } from "@/api/integralOperation/integralTransferDetail";
 import addDialog from './components/addDialog'
 import handlePageMixin from "@/mixins/handlePageMixin";
 export default {
   name: "shopDetail",
   components: {
    addDialog
   },
   props: {
     id: String,
   },
   mixins: [handlePageMixin],
   data() {
     return {
       formalitiesVisible: false,
       tableData:[],
       transferStatusList: [
        {id:2,value:'待支付'},
        {id:1,value:'已完成'},
        {id:3,value:'已取消'},
       ], //转赠状态
       transferTypeList: [
        {id:1,value:'CoCo'},
        {id:2,value:'椰分'},
       ], //转赠类型
       queryParams: {
         fromCustomerPhone: '', //转赠账户(手机号)、地址
         toCustomerPhone: '', //接收账户(手机号)、地址
         donationType: '', //转赠类型
         status: '', // 状态
       },
       tableColumn: [
           {
             prop: "donationNo",
             label: "转赠单号"
           },
           {
             prop: "createTime", 
             label: "转赠时间"
           },
            {
             slot: true,
             slotName: "donationType",
             label: "转赠类型",
             width: 100
           },
           {
             prop: "donationAmount",
             label: "转赠数量",
             width: 100
           },
           {
             prop: "fromCustomerPhone",
             label: "转赠账户"
           },
            {
             prop: "fromCustomerAddress",
             label: "转赠地址"
           },
           {
             prop: "toCustomerPhone",
             label: "接收账户"
           },
            {
             prop: "toCustomerAddress",
             label: "接收地址"
           },
            {
             label: "转赠手续费",
             slot: true,
             slotName: "fee",
           },
           {
             label: "状态",
             slot: true,
             slotName: "status",
             fixed: "right",
           },
         ],
     };
   },
   watch: {
    
   },
   created() { 
     this.getList()
    //  this.getadminDict()
   },
   mounted() {
   
   },
   methods: {
    //  getadminDict() {
    // //获取商户类型字典
    // var dictType = "customer_change_order";
    // this.$getSelectList(dictType)
    //     .then((res) => {
    //     this.recordTypeList = res.result[0].dictList;
    //     })
    //  },
     // 转赠手续费配置
     formalities(){
        this.formalitiesVisible = true
     },
     /** 查询盲盒开奖名单*/
     getList() {
       this.loading = true;
       var data = {
         ...this.pageOptions,
         ...this.queryParams,
       }
       integralRecordList(data).then(response => {
         const {records ,total} = response.result
         console.log('response',response)
         this.tableData = records
         this.$refs.table.pageOptions.total = total;
         this.loading = false;
       });
     },
     /** 搜索按钮操作 */
     handleQuery() {
       // this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       // this.resetForm();
       this.$refs["queryForm"].resetFields();
       this.handleQuery();
     },
     _handleSuccess(){
       this.getList()
     },
   },
 };
 </script>
  <style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
    display: flex;
    flex-direction: row;
    // align-items: center;
    justify-content: space-between;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  </style>
  